<template>
  <view class="container" @touchmove.stop.prevent="moveHandle">
    <view class="header">
      <view class="title">账号信息</view>
    </view>
    <view class="content">
      <view class="item">
        <view>头像</view>
        <image class="image" :src="userInfo.avatar" />
      </view>
      <view class="item">
        <view>昵称</view>
        <view>{{ userInfo.name }}</view>
      </view>
      <view class="item">
        <view>账号</view>
        <view>{{ userInfo.mobile }}</view>
      </view>
    </view>
    <view class="footer">
      <button class="button">保存</button>
    </view>
  </view>
</template>
  
<script>
export default {
  data() {
    return {
      userInfo: {
        name: '大耳朵图图',
        avatar: '/static/images/userIcon.png',
        address: '山东省淄博市张店区',
        mobile:'13988888888'
      },
    };
  },
  methods: {
    moveHandle() {
      return false
    }
  }
};
</script>
  
<style lang="less" scoped>
.image{
  width: 50upx;
  height: 50upx;
  margin-top: 25upx;
}
.header{
  padding: 40upx 30upx 0 30upx;
  background-color: #fff;
  .title{
    line-height: 30upx;
    border-bottom: 1upx solid #ececec;
    font-size: 28upx;
    padding-bottom: 25upx;
  }
}
.content{
  padding: 0 30upx;
  background-color: #fff;
  .item{
    display: flex;
    justify-content: space-between;
    height: 100upx;
    line-height: 100upx;
  }
}
.footer{
  padding: 30upx;
  background-color: #fff;
  margin-top: 15upx;
  height: 100vh;
  .button{
    background-color: #d01117;
    color:#fff;
  }
}
</style>